<template>
    <div id="topArea" class="mk_shouping">
        <div id="topArea_text">
           <div>
                <div id="topArea_text-title">
                    利用AI+大数据，重构财务数据分析
                </div>
                <div  class="font-size">
                    数行科技通过金融监管科技,为金融机构和监管机构提供针对企业财务数据欺诈和风险
                </div>
                <div  class="font-size">
                    分析解决方案;同时通过财务数据治理,打造企业数字中台。
                </div>
           </div>
        </div>
        <div id="indexLizi" :style="{width:'100%', height: '100%',}">

        </div>
        
    </div>
</template>

<script>
var r = require('./extend').default(13)
export default {
    name: 'TopArea',
    dec: '顶端区域',

    data () {
        return {
            W: 0,//innerWidth + 'px',
            H: 0,//innerHeight + 'px',
            interval: null,
        }
    },
     mounted() {
      
 
        
            this.liziInit()
         
            window.TopAreaFN = this.TopAreaFN.bind(this)

     },
     methods: {
         TopAreaFN () {
            
              if(this.interval) clearInterval(this.interval)
              var ele = document.getElementById("indexLizi")
              if(ele){
                   ele.innerHTML=""
                   this.liziInit()
              }
             
         },
         liziInit () {
                function t() {
                  
                    
                    s = document.createElement("div"),
                        s.style.position = "relative",
                        // s.style.top = "200px",
                        document.getElementById("indexLizi").appendChild(s),
                        c = new r.Camera(75, m / p, 1, 1e4),
                        c.position.z = 1e3,
                        u = new r.Scene,
                        f = new r.CanvasRenderer,
                        f.setSize(m, p),
                        a = new Array;
                    for (var t = 0, o = new r.ParticleCircleMaterial(621531, 1), v = 0; v < x; v++)
                        for (var y = 0; y < g; y++)
                            h = a[t++] = new r.Particle(o),
                                h.position.x = v * d - x * d / 2,
                                h.position.z = y * d - g * d / 2,
                                u.add(h);
                    l = 0,
                        s.appendChild(f.domElement),
                        document.addEventListener("mousemove", i, !1),
                        document.addEventListener("touchstart", n, !1),
                        document.addEventListener("touchmove", e, !1)
                }
                function i(t) {
                    v = t.clientX - b,
                        y = t.clientY - M
                }
                function n(t) {
                    1 == t.touches.length && (t.preventDefault(),
                        v = t.touches[0].pageX - b,
                        y = t.touches[0].pageY - M)
                }
                function e(t) {
                    1 == t.touches.length && (t.preventDefault(),
                        v = t.touches[0].pageX - b,
                        y = t.touches[0].pageY - M)
                }
                function o() {
                    c.position.x += .05 * (v - c.position.x),
                        c.position.y = 364;
                    for (var t = 0, i = 0; i < x; i++)
                        for (var n = 0; n < g; n++)
                            h = a[t++],
                                h.position.y = 50 * Math.sin(.3 * (i + l)) + 50 * Math.sin(.5 * (n + l)),
                                h.scale.x = h.scale.y = 2 * (Math.sin(.3 * (i + l)) + 1) + 2 * (Math.sin(.5 * (n + l)) + 1);
                    f.render(u, c),
                        l += .1
                }
                var s, a, h, l, c, u, f, m = window.innerWidth, p = window.innerHeight, d = 90, x = 50, g = 50, v = 0, y = 0, b = window.innerWidth / 2, M = window.innerHeight / 2;
                t(),
                this.interval = setInterval(o, 1e3 / 60)
            }
     },
    
}
</script>
<style lang="less">
        @import url('../../../../main.less');
         canvas{
    display: block;
}
#topArea{
   position: relative;
    //   width: 19.20rem;
      height: 7rem;
      overflow: hidden;
   #topArea_text{
       position: absolute;
    
       width: 100%;
    
       left: 0;
       top: 0;
       z-index: 12;
       text-align: center;
       font-size: 0.67rem;
       color: #ffffff;
      
       margin-top:2.53rem;
    //    padding: 0 3.65rem;
        

       box-sizing: border-box;
       >div{
                width: @w;
              margin: 0 auto;
       }
       .font-size{
           font-size: 0.3rem;
       }
       >div > div:nth-child(2){
           margin-top: 0.5rem;
       }
       >div > div:nth-child(3){
           margin-top: 0.22rem;
           
       }
   }

   #bottom{
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       background: rgba(255,255,255, 0.1);
       >div{
         width: @w;
         font-size: 0.34rem;
         color: #fff;
         display: flex;
         margin: 0 auto;
         justify-content: space-between;
         height: 3rem;
         line-height: 3rem;
       }
   }
   

}
       
</style>